<template>
    <div>
        <h1>orgTree</h1>
        <Anchor title="概述" h2></Anchor>
        <p>组织机构框，选择人员或者部门，支持单选多选模式。</p>
        <Anchor title="代码示例" h2></Anchor>
        <Demo title="人员单选" vertical hide-code>
            <div slot="demo">
                <Button type="primary" @click="personalCheck">人员选择</Button>
                <br>
                <br>
                <!--<RadioGroup v-model="personalRadio">-->
                    <!--<Radio label="true">-->
                        <!--<Icon type="logo-apple"></Icon>-->
                        <!--<span>单选</span>-->
                    <!--</Radio>-->
                    <!--<Radio label="false">-->
                        <!--<Icon type="logo-apple"></Icon>-->
                        <!--<span>多选</span>-->
                    <!--</Radio>-->
                <!--</RadioGroup>-->
                <ul>
                    <li v-for="user in userList" :key="user.id">{{user.name}}</li>
                </ul>
                <orgTree
                        :visible="orgTreeVisible"
                        :option="{deptFlag: false, userFlag: true, singleFlag: personalRadio=='true'}"
                        @update:visible="orgTreeVisible = false"
                        @on-save="saveAuditUser"
                />
                <br>
                <br>
            </div>
            <div slot="desc">
                <p>{singleFlag:true} 开始单选</p>
            </div>
            <i-code lang="vue" slot="code">{{ code.base }}</i-code>
        </Demo>
        <Demo title="部门单选" vertical hide-code>
            <div slot="demo">
                <br>
                <br>
                <Button type="primary" @click="depCheck">部门选择</Button>
                <br>
                <br>
                <ul>
                    <li v-for="dep in depList" :key="dep.id">{{dep.name}}</li>
                </ul>
                <orgTree
                        :visible="orgTreeVisibleDep"
                        :option="{deptFlag: true, userFlag: false, singleFlag: true}"
                        @update:visible="orgTreeVisibleDep = false"
                        @on-save="saveAuditDep"
                />
            </div>
            <div slot="desc">
                <p>{singleFlag:true} 开始单选</p>
            </div>
            <i-code lang="vue" slot="code">{{ code.change }}</i-code>
        </Demo>
        <div class="api">
            <Anchor title="API" h2></Anchor>
            <p>参数 config 为对象，具体说明如下：</p>
            <table>
                <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>visible</td>
                    <td>自组件监听prop，父组件通过改变值来控制组织机构框的显示隐藏</td>
                    <td>Boolean</td>
                    <td>
                        true
                    </td>
                </tr>
                <tr>
                    <td> option</td>
                    <td>组织机构框配置</td>
                    <td>Object</td>
                    <td>
                        deptFlag   -> 是否为部门选择模式；
                        userFlag   -> 是否为人员选择模式；
                        singleFlag -> 是否为单选模式;
                    </td>
                </tr>
                <tr>
                    <td> option</td>
                    <td>组织机构框配置</td>
                    <td>Object</td>
                    <td>
                        deptFlag   -> 是否为部门选择模式；
                        userFlag   -> 是否为人员选择模式；
                        singleFlag -> 是否为单选模式;
                    </td>
                </tr>
                <tr>
                    <td>@on-save</td>
                    <td>子组件点击确认时，回调父组件方法，并将部门或人员数组参数返回。</td>
                    <td>Function</td>
                    <td>

                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    import Demo from './demo/demo.vue';
    import Anchor from './anchor.vue';
    import Code from './code/orgTree';
    import iCode from './code/code';
    // 组织机构框
    import orgTree from '@/components/orgtree/OrgTree'


    export default {
        name: 'WorkFlow',
        data() {
            return {
                code: Code,
                orgTreeVisible: false,
                orgTreeVisibleDep: false,
                userList:[],
                depList:[],
                personalRadio:'true',
            }
        },
        components: {
            Anchor,
            Demo,
            iCode,
            orgTree,
        },
        mounted() {

        },
        methods: {
            saveAuditUser(userList) {
                this.userList = userList ;
            },
            saveAuditDep(depList) {
                this.depList = depList;
            },
            personalCheck() {
                this.orgTreeVisible = true;
            },
            depCheck() {
                this.orgTreeVisibleDep = true;
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .api table {
        font-family: Consolas, Menlo, Courier, monospace;
        font-size: 12px;
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #e9e9e9;
        width: 100%;
        margin-bottom: 24px
    }

    .api table th {
        background: #f7f7f7;
        white-space: nowrap;
        color: #5c6b77;
        font-weight: 600
    }

    .api table td, .api table th {
        border: 1px solid #e9e9e9;
        padding: 8px 16px;
        text-align: left
    }

    .api table td ul li {
        font-size: 12px !important
    }
</style>
